<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>总结</h1>
        <p>
            事件的基本使用: <br>
            1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名; <br>
            2.事件的回调需要配置在methods对象中，最终会在vm上: <br>
            3.methods中配置的所数，不要用箭头函数! <br>
            4.methods中配置的所数，不能用箭头函数，否则this就不是vm作
            4.methods中配置的所数，都是被Vue所管理的所管理的函数，this的指向是vm 或 组件实例对象;
            5.@click="demo"和 @click="demo($event)” 效果一致，但后者可以传参,如果在传递参数 需要event 需要调用的时候 参数中添加占位符;
        </p>
        <hr>
        <div  v-show="is_show">这是演示{{content}}的内容</div>
        <button v-on:click="changeShow(11,$event)">显示/隐藏/</button>
        <button @click="changeShow(22,$event)">显示/隐藏</button>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            name:"haha",
            address:"重庆",
            is_show:false,
            content:""
        },
        methods:{
            changeShow(id,event){
                 console.log(event);
                this.content =id;
                // console.log(this);
                this.is_show=!this.is_show;
            }
        }
    });
</script>
</html>